<template>
    <div class="custom">
        <div class="top">
            <div class="px-90"></div>
            <div>
                <span class="px-30 py-10 title fs-13">现有客户</span>
            </div>
        </div>
        <div class="top">
            <div class="left px-90 fr-ac">
                <form-view
                    :list="formList"
                    :size="'large'"
                    :buttonStyleR="purple"
                    ref="formViewRef"
                    @box="customBox"
                ></form-view>
            </div>
            <div class="right py-15 px-15">
                <div class="fr-ac py-15">
                    <div v-for="item in buttonlist" :key="item.id">
                        <div v-if="item.id === 1" class="fr-ac mr-60">
                            <el-input
                                v-model="item.model"
                                :placeholder="item.placeholder"
                            ></el-input>
                            <el-button
                                class="mx-15"
                                :style="purple"
                                @click="search(item)"
                                >{{ item.title }}</el-button
                            >
                        </div>
                        <el-button
                            class="mx-5"
                            :style="purple"
                            v-if="item.id !== 1"
                            @click="search(item)"
                            >{{ item.title }}</el-button
                        >
                    </div>
                </div>
                <table-view
                    :data="tableData"
                    :propList="tableProp"
                    :total="tableTotal"
                    @pageClick="tablePage"
                ></table-view>
            </div>
        </div>
        <dialog-view
            :dialog="customDEL"
            @close="close"
            width="20%"
            title="删除账户"
            :spacing="8"
            :background="customdelBG"
        >
            <template #main>
                <div class="px-20 py-20">
                    <p class="fs-10 t-c">确定删除该账户</p>
                    <div class="fr-ac-jsa mt-10">
                        <el-button :style="purple" @click="confirm"
                            >确定</el-button
                        >
                        <el-button :style="purple" @click="close"
                            >取消</el-button
                        >
                    </div>
                </div>
            </template>
        </dialog-view>
        <dialog-view
            :dialog="customMember"
            @close="close"
            width="60%"
            title="绑定会员用户"
            :spacing="8"
            :background="customdelBG"
        >
            <template #main>
                <div class="px-15 py-10">
                    <form-view
                        :list="formMember"
                        :gridFormItem="4"
                        :height="0"
                        row
                    ></form-view>
                    <table-view
                        :data="memberData"
                        :propList="memberProp"
                        :total="memberTotal"
                        :spacing="30"
                        :pageSize="memberSize"
                        paging="center"
                        layout="prev, pager, next ,total,jumper"
                        jumper
                        radio
                        border
                        @itemClick="itemClick"
                        @jumperClick="sizeClick"
                    ></table-view>
                </div>
                <div
                    class="fr-ac-jc py-15 p-s"
                    style="bottom: 0; background: #fff; z-index: 99"
                >
                    <el-button :style="purple" @click="memberConfirm"
                        >确定</el-button
                    >
                    <el-button :style="purpleWhite" @click="close"
                        >取消</el-button
                    >
                </div>
            </template>
        </dialog-view>
    </div>
</template>
<script  setup>
import { onMounted, ref } from "vue";
import { purple, purpleWhite } from "@/comment/data";
import {
    customAdd,
    customList,
    customDel,
    customBatchRemark,
    customEdit,
    customMemberLists,
    customDetail,
} from "./volunteer";
import { debounce, throttle } from "lodash";
import {
    updateMessage,
    updateOrGetValue,
    optionsArray,
} from "@/comment/method";
import { useUserStore } from "@/store/userStore";
const userStore = useUserStore();
const formList = ref([]);
const formViewRef = ref(null);
const tableData = ref([]);
const tableTotal = ref(0);
const tableProp = ref([
    {
        id: 1,
        prop: "id",
        label: "ID",
    },
    {
        id: 2,
        prop: "phone",
        label: "手机号",
    },
    {
        id: 3,
        prop: "name",
        label: "姓名",
    },
    {
        id: 4,
        prop: "xk",
        label: "选科",
    },
    {
        id: 5,
        prop: "score",
        label: "分数",
    },
    {
        id: 6,
        prop: "year",
        label: "年份",
    },
    {
        id: 7,
        prop: "assistant",
        label: "助理",
    },
    {
        id: 8,
        prop: "filling",
        label: "填报师",
    },
    {
        id: 9,
        prop: "check",
        label: "审核员",
    },
    {
        id: 10,
        prop: "",
        label: "操作",
        operate: [
            {
                id: 1,
                label: "编辑",
                isPopover: false,
                tooltip: "",
                style: purple,
                void: (val) => {
                    //
                },
            },
            {
                id: 2,
                label: "添加备注",
                isPopover: false,
                tooltip: "",
                style: purple,
                void: (val) => {
                    //
                },
            },
            {
                id: 3,
                label: "删除账户",
                isPopover: false,
                tooltip: "",
                style: purple,
                void: (val) => {
                    customDEL.value = true;
                    customId.value = val.id;
                },
            },
        ],
    },
]);
const buttonlist = ref([
    {
        id: 1,
        title: "搜索",
        placeholder: "请输入搜索关键字",
        model: null,
    },
    {
        id: 2,
        title: "批量操作",
        placeholder: "",
        model: false,
    },
    {
        id: 3,
        title: "返回列表",
        placeholder: "",
        model: null,
    },
]);
const customDEL = ref(false);
const customdelBG = ref(
    "url(https://file.gkzzd.cn/www/gkzzd/uploads/20250625/d8fb87ce99e397e759bde7c949029956.jpg) no-repeat"
);
const customId = ref(null);
const customMember = ref(false);
const formMember = ref([
    {
        id: 1,
        prefix: false,
        type: "",
        label: "手机号码",
        model: "",
        prop: "phone",
        suffixIcon: "",
        rules: [],
        formType: "input",
        placeholder: "请输入客户手机号码",
        list: [],
    },
    {
        id: 2,
        prefix: false,
        type: "",
        label: "客户名称",
        model: "",
        prop: "name",
        suffixIcon: "",
        rules: [],
        formType: "input",
        placeholder: "请输入客户姓名",
        list: [],
    },
    {
        id: 3,
        prefix: false,
        type: "",
        label: "高考年份",
        model: "",
        prop: "year",
        suffixIcon: "",
        rules: [],
        formType: "select",
        placeholder: "请选择高考年份请选择高考年份",
        list: [],
    },
    {
        id: 4,
        prefix: false,
        type: "",
        label: "",
        model: "",
        prop: "year",
        suffixIcon: "",
        rules: [],
        formType: "null",
        placeholder: "请选择高考年份请选择高考年份",
        list: [
            {
                label: "查询",
                value: "查询",
                style: purple,
                type: "query",
                void: () => {},
            },
            {
                label: "重置",
                value: "重置",
                type: "reset",
                style: purpleWhite,
                void: () => {},
            },
        ],
    },
]);
const memberData = ref([]);
const memberTotal = ref(0);
const memberProp = ref([
    {
        id: 1,
        prop: "phone",
        label: "会员手机号",
    },
    {
        id: 2,
        prop: "name",
        label: "会员姓名",
    },
    {
        id: 3,
        prop: "wechat_nickname",
        label: "会员微信昵称",
    },
]);
const memberInfo = ref({});
const memberSize = ref(15);
const submit = async (val) => {
    let data = {
        ...val,
        province: userStore.user.province,
    };
    const res = await customAdd(data);
    list();
    formViewRef.value.resetForm();
};
const customBox = () => {
    customMember.value = true;
};
const itemClick = (val) => {
    if (val.length === 0) {
        return (memberInfo.value = {});
    }
    memberInfo.value = val[0];
};
const memberConfirm = () => {
    close();
    if (JSON.stringify(memberInfo.value) !== "{}") {
        updateOrGetValue(6, "model", formList.value, memberInfo.value.name);
    } else {
        updateOrGetValue(6, "model", formList.value, "");
    }
};
const list = async (page = 1, search = "", crowd = "") => {
    const res = await customList({
        limit: 10,
        page: page,
        search: search,
        crowd: crowd,
        province: userStore.user.province,
    });
    tableData.value = res.lists;
    tableTotal.value = res.total;
};
const member = async (
    page = 1,
    limit = 15,
    phone = "",
    name = "",
    wechat_nickname = ""
) => {
    const res = await customMemberLists({
        page: page,
        limit: limit,
        phone: phone,
        name: name,
        wechat_nickname: wechat_nickname,
    });
    memberData.value = res.lists;
    memberTotal.value = res.total;
};
const tablePage = (val) => {
    list(val);
};
const sizeClick = (val) => {
    memberSize.value = val;
    member(1, val);
};
const search = (val) => {
    switch (val.id) {
        case 1:
            list(1, val.model);
            break;
        case 2:
            val.model = true;
            break;
        case 3:
            list();
            updateOrGetValue(1, "model", buttonlist.value, "");
            break;
    }
};
const close = () => {
    customDEL.value = false;
    customMember.value = false;
};
const confirm = async () => {
    const res = await customDel({
        id: customId.value,
    });
    list();
    close();
    updateMessage("删除成功", "success");
};
onMounted(() => {
    list();
    member();
    switch (userStore.user.province) {
        case "福建":
            formList.value = [
                {
                    id: 1,
                    prefix: false,
                    type: "",
                    label: "手机号码",
                    model: "",
                    prop: "phone",
                    suffixIcon: "",
                    rules: [
                        {
                            required: true,
                            message: "此为必填项",
                            trigger: ["blur", "change"],
                        },
                        {
                            pattern: /^1[3456789]\d{9}$/,
                            message: "手机号格式不正确",
                            trigger: "blur",
                        },
                    ],
                    formType: "input",
                    placeholder: "请输入客户手机号码",
                    list: [],
                },
                {
                    id: 2,
                    prefix: false,
                    type: "",
                    label: "客户名称",
                    model: "",
                    prop: "name",
                    suffixIcon: "",
                    rules: [
                        {
                            required: true,
                            message: "此为必填项",
                            trigger: ["blur", "change"],
                        },
                    ],
                    formType: "input",
                    placeholder: "请输入客户姓名",
                    list: [],
                },
                {
                    id: 3,
                    prefix: false,
                    type: "",
                    label: "高考年份",
                    model: "",
                    prop: "year",
                    suffixIcon: "",
                    rules: [
                        {
                            required: true,
                            message: "此为必填项",
                            trigger: ["blur", "change"],
                        },
                    ],
                    formType: "select",
                    placeholder: "请选择高考年份请选择高考年份",
                    list: [],
                },
                {
                    id: 4,
                    prefix: false,
                    type: "",
                    label: "成交时间",
                    model: "",
                    prop: "trade_time",
                    suffixIcon: "",
                    rules: [
                        {
                            required: true,
                            message: "此为必填项",
                            trigger: ["blur", "change"],
                        },
                    ],
                    formType: "date",
                    placeholder: "请输入成交年月日",
                    list: [],
                },
                {
                    id: 5,
                    prefix: false,
                    type: "",
                    label: "成交金额",
                    model: "",
                    prop: "trade_price",
                    suffixIcon: "",
                    rules: [
                        {
                            required: true,
                            message: "此为必填项",
                            trigger: ["blur", "change"],
                        },
                        {
                            pattern: /^\d+$/,
                            message: "必须是数字",
                            trigger: "blur",
                        },
                    ],
                    formType: "input",
                    placeholder: "请输入实际成交金额",
                    list: [],
                },
                {
                    id: 6,
                    prefix: false,
                    type: "",
                    label: "绑定会员用户",
                    model: "",
                    prop: "member_id",
                    suffixIcon: "",
                    rules: [],
                    formType: "box",
                    placeholder: "请选择会员用户",
                    list: [],
                },
                {
                    id: 7,
                    prefix: false,
                    type: "",
                    label: "选择考生",
                    model: "",
                    prop: "file_code",
                    suffixIcon: "",
                    rules: [],
                    formType: "select",
                    placeholder: "请选择",
                    list: [],
                },
            ];
            break;
        case "浙江":
            formList.value = [
                // {
                //     id: 1,
                //     label: '手机号码',
                //     placeholder: '请输入客户手机号码',
                //     list: [],
                //     prop: 'tel',
                //     type:'input',
                //     asterisk: false
                // },
                // {
                //     id: 2,
                //     label: '客户名称',
                //     placeholder: '请输入家长客户姓名',
                //     list: [],
                //     prop: 'name',
                //     type:'input',
                //     asterisk: false
                // },
                // {
                //     id: 3,
                //     label: '高考年份',
                //     placeholder: '请选择高考年份请选择高考年份',
                //     list: tallYear.value,
                //     prop: 'year',
                //     type:'select',
                //     asterisk: false
                // },
                // {
                //     id: 4,
                //     label: '选考科目',
                //     placeholder: '请选择',
                //     list: options14,
                //     prop: 'firstSubject',
                //     type:'select',
                //     asterisk: false,
                //     multiple: true,
                //     multiple_limit:3
                // },
                // {
                //     id: 5,
                //     label: '成交时间',
                //     placeholder: '请输入成交年月日',
                //     list: [],
                //     prop: 'data',
                //     type:'date',
                //     asterisk: false
                // },
                // {
                //     id: 6,
                //     label: '成交金额',
                //     placeholder: '请输入实际成交金额',
                //     list: [],
                //     prop: 'money',
                //     type:'input',
                //     asterisk: false
                // },
                // {
                //     id: 7,
                //     label: '高考分数',
                //     placeholder: '未高考出分可不填',
                //     list: [],
                //     prop: 'fraction',
                //     type:'input',
                //     asterisk: true
                // }
            ];
            break;
    }
});
</script>
<style lang="scss" scoped>
.custom {
    height: calc(100vh - 90px);
    padding: 90px 100px;
    box-sizing: border-box;
    .top {
        display: grid;
        grid-template-columns: 5fr 10fr;
        gap: 30px;
    }
    .title {
        display: inline-block;
        background: #4c41b2;
        border: 1px solid #4c41b2;
        color: #fff;
    }
    .left {
        height: calc(100vh - 322px);
        overflow: auto;
    }
    .right {
        border-radius: 5px;
        overflow: auto;
        box-shadow: 0px 0px 20px 0px rgba(0, 14, 59, 0.1);
        height: calc(100vh - 322px);
    }
}
</style>